
        *{
            margin: 0;
            padding:0;
            list-style: none;

        }
        body{
            /* background-color: rgb(236, 58, 58); */
            background: linear-gradient(200deg, #3232d4, #fa2727,#e9b7b7,#fff,#f34a24);
        
        }
        button{
        cursor: pointer;
        }
      

        .head{
            width: 100%;
            height: 120px;
            float: left;
           text-align: center;
            /* background: linear-gradient(600deg, #22a1c1, #84f3f7); */
        }
      
        .head span{
           float: left;
            font-size: 40px;
            margin: 20px 700px;
        }

        /* 中间主题页面 */
        .content{
            /* display: flex; */
            width:100%;
        }
        /* 左侧导航栏 */
        .nav-left{
            width:200px;
               transition: width 1s; 
            /* ---- */
            margin-top: 20px;
            text-align:center;
            
            height: 550px;
            float: left;
        background: linear-gradient(200deg, #f34a24, #3e1df8);
            align-items: center;
        }
        .nav_left_show{
            width:100px
        }
        .nav-left span{
            cursor: pointer;
        }
        .nav-left ul{
            display: flex; 
             flex-direction: column;
            
        }
        .nav-left button{
            
            border: 0;
            padding: 20px 0px;
            font-size: 20px;
        background: linear-gradient(200deg, #f34a24, #1d8bf8);
        }
        .nav-left button:hover{
            background-color: rgb(59, 60, 61);
        }
        /* 内容页1 */
        .content1{
        width: calc(100% - 300px );
        transition: width 1s;
            height: 550px;
          margin: 20px 20px;
            float: left;
            
        background: linear-gradient(200deg, #f34a24, #3e1df8);
            text-align: center;
            z-index: 1;
        }
  .content1_show{
    width: calc(100% - 150px);
  }
        .c-nav{

                margin: 50px ;
        }
        .table1{
            margin-left: 100px;
        }
        .table1 i{
            padding: 2px;
            cursor: pointer;
        }
        caption{
            font-size: 30px;
        }
        table{
            margin-left: 40px;
            border-collapse:collapse;
            width: 80%;
            background-color: rgb(255, 255, 255);
        }
       table,th,td{
          border: 3px solid black;
           height: 40px;
           color: rgb(0, 0, 0);
           text-align:center;
       }
       /* 删除按钮 */
          .delete{
              color: #fff;
            padding: 5px;
            margin: 0px 10px;
              background-color: #da4f49;
              border: 3px solid #ee897e;
          }
    
          .delete:hover {
              color: #fff;
              background-color: #00d0ff;
          }

        .change {
            color: #fff;
            padding: 5px;
            background-color: #0a92b8;
            border: 3px solid #7ee8ee;
        }

        .change:hover {
            color: #fff;
            background-color: #f82b07;
        }
        .addbtn {
            color: #fff;
            padding: 5px;
            float: right;
            background-color: #0a92b8;
            border: 3px solid #7ee8ee;
        }

        .addbtn:hover {
            color: #fff;
            background-color: #f82b07;
        }
       /* 底部分页按钮 */
      .bottom table{
       
         margin-left: 100px;
      }
    .active {
           background-color: aqua;
              color: rgb(212, 55, 55);
          }
      .bottom a{
        border-radius: 2px;
        cursor: pointer;
           text-decoration: none;
           color:#000000;
      }
       /* 弹窗 */
        .modal-content {
               position: fixed;
               top: 25%;
               left: 50%;
               margin-left: -10%;
               width: 20%;
               height: 50%;
               min-width: 21.125rem;
               min-height: 18.625rem;
               border-radius: .125rem;
               background-color: white;
               z-index: 2;
            
           }
           .cha{
               float:right;
               margin-right: 20px;
               margin-top: -30px;
                    cursor: pointer;
           }
                   .modal-body {
                       position: relative;
                       width: 100%;
                       height: 100%;
                   }
        
                   .mb_revise {
                       padding: .625rem 0 0 1.5625rem;
                   }
        
                   .mb_revise>p {
                       padding-left: .25rem;
                       margin-top: .125rem;
                       font-family: 'FangSong', Times, serif;
                       font-size: 15px;
                       border-left: solid .125rem royalblue;
                   }
        
                   /*修改框*/
                   .xiugai {
                       height: 2em;
                       width: 11.375rem;
                       margin-top: .625rem;
                   }
        
                   /* 确定和取消 */
                   .determine,
                   .cancen {
                       position: absolute;
                       width: 3.625rem;
                       height: 2.1875rem;
                       color: #fff;
                       border: 0;
                       outline: none;
                       box-shadow: 0 .125rem .125rem rgb(107, 96, 96);
                       cursor: pointer;
                   }
        
                   .determine {
                       right: 6.5rem;
                       bottom: .725rem;
                       background-color: rgba(9, 139, 245, 0.788);
                   }
        
                   .cancen {
                       right: 2rem;
                       bottom: .725rem;
                       background-color: rgba(212, 37, 37, 0.788);
                   }
        
                   .determine:hover,
                   .cancen:hover {
                       color: #fff;
                       box-shadow: 0 .134rem .1275rem rgb(58, 57, 57);
                   }
        
                   .determine:active,
                   .cancen:active {
                       box-shadow: 0 .134rem .1275rem rgba(230, 227, 227, .758);
                   }
/* 修改弹窗 */

          .modal-content2 {
              position: fixed;
              top: 25%;
              left: 50%;
              margin-left: -10%;
              width: 20%;
              height: 40%;
              min-width: 21.125rem;
              min-height: 18.625rem;
              border-radius: .125rem;
              background-color: white;
              z-index: 2;
    
          }
    
          .chaone {
              float: right;
              margin-right: 20px;
              margin-top: -30px;
              cursor: pointer;
          }
    
          .modal-body2 {
              position: relative;
              width: 100%;
              height: 100%;
          }
    
          .mb_revise2 {
              padding: .625rem 0 0 1.5625rem;
              margin-top: 10px;
          }
    
          .mb_revise2>p {
              padding-left: .25rem;
              margin-top: .125rem;
              font-family: 'FangSong', Times, serif;
              font-size: 15px;
              border-left: solid .125rem royalblue;
          }
    
          /*修改框*/
          .xiugai {
              height: 2em;
              width: 11.375rem;
              margin-top: .625rem;
          }
    
          /* 确定和取消 */
         
          .cancen2 {
              position: absolute;
              width: 3.625rem;
              height: 2.1875rem;
              color: #fff;
              border: 0;
              outline: none;
              box-shadow: 0 .125rem .125rem rgb(107, 96, 96);
              cursor: pointer;
          }
    
        
          .cancen2 {
             
              right: 2rem;
              bottom: .725rem;
              background-color: rgba(21, 95, 127, 0.788);
          }
    
        
          .cancen2:hover {
              color: #fff;
              box-shadow: 0 .134rem .1275rem rgb(58, 57, 57);
          }
    
          
          .cancen2:active {
              box-shadow: 0 .134rem .1275rem rgba(230, 227, 227, .758);
          }
          /* 内容页2 */
        .content2 {
            width: 70%;
                transition: width 1s;
            height: 550px;
            margin: 20px 20px;
            float: left;
            margin-left: 100px;
            /* background-image: url("../img/9.jpg"); */
            background-color: #00d0ff;
                background-size: 100% 100%;
            text-align: center;
            z-index: 1;
            /* position: relative */
        }
      
        .video{
            /* position: relative; */
            float: left;
            width: 30%;
            margin-top: 270px;
            margin-left: 60px;
            height: 200px;
        }
        .video video{
            width: 100%;
            height: 100%;
        }
                /* 清除li前面的圆点 */
                .content2 li {
                    list-style-type: none;
                }
        
                .showImg {
                    float: right;
                    position: relative;
                    width: 100%;
                    height: 100%;
                    /* margin-top: 20px;
                    margin-right: 30px; */
                    overflow: hidden;
                    background-color: rgb(241, 172, 82);

                }
        
                /* 轮播图片 */
                .showImg img {
                    width: 100%;
                    height: 100%;
                }
        
                /* 箭头图标 */
                .iconDiv {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 30px;
                    height: 30px;
                    border: 2px solid rgb(255, 253, 253);
                    border-radius: 15px;
                    background-color: rgba(231, 110, 110, 0.2);
                    line-height: 30px;
                    text-align: center;
                    font-size: 25px;
                    cursor: pointer;
                }
        
                .iconDiv:hover {
                    background-color: white;
                }
        
                .icon-left {
                    left: 10px;
                }
        
                .icon-right {
                    right: 10px;
                }
        
                /* 控制圆点 */
                .banner-circle {
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    height: 20px;
                }
        
                .banner-circle ul {
                    margin: 0 50px;
                    height: 100%;
                    text-align: right;
                }
        
                .banner-circle ul li {
                    display: inline-block;
                    width: 14px;
                    height: 14px;
                    margin: 0 5px;
                    border-radius: 7px;
                    background-color: rgba(125, 125, 125, .8);
                    cursor: pointer;
                }
        
                .active1 {
                    background-color: black !important;
                }
                .swipe_title {
                    position: absolute;
                    line-height: 60px;
                    height: 60px;
                    width: 76%;
                    z-index: 20;
                    text-align: left;
                    /* background-color: #da4f49; */
                    color: rgb(198, 64, 239);
                    font-size: 50px;
                    margin-left: 100px;
                    bottom: 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap
                }

                /* 内容三 */
        .content3 {
            width: 80%;
            height: 550px;
            margin: 20px 20px;
            float: left;
        /* background: linear-gradient(200deg, #24abf3, #1de9f8); */
        
            text-align: center;
            z-index: 1;
            background-image: url("../img/8.jpg") ;
          background-size: 100% 100%;
            /* 事务清单 */
        }
        
        .select{
        
            width: 50%;
            height: 30px;
            float: right;
            margin: 80px 30px;

        }
        /* 日历样式 */
            .calendar input{
                width: 50px;
                text-align: center;
            }
                  .calendar {
                      width: 30%;
                      /* float:right; */
                      margin: 150px 100px 0px 680px;
                      padding: 10px;
                      border-radius: 5px;
                      overflow: hidden;
                      background: #28a1ff;
        
                  }
        
                  .month {
                      background: #28a1ff;
                      color: #fff;
                      height: 32px;
                      margin: 0 auto;
                      padding: 0 10px;
                  }
        
                  .month ul {
                      margin: 0 auto;
                      height: 32px;
                      width: 90%;
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                  }
        
                  .month ul li {
                      cursor: pointer;
                  }
        
                  .arrow {
                      width: 32px;
                      text-align: center;
                  }
        
                  .weekdays,
                  .days {
                      /* 格式排版 */
                      display: grid;
                      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
                      align-items: center;
                      justify-items: center;
                      padding: 10px 10px;
                  }
        
                  .weekdays {
                      grid-template-rows: 32px;
                      background: #28a1ff;
                      color: #fff;
                  }
        
                  .days {
                      grid-template-rows: 32px 32px 32px 32px 32px;
                      background-color: #0986e7;
                      color: #fff;
                      padding-top: 10px;
                      border-radius: 5px;
                  }
        
                  .days li {
                      width: 100%;
                      height: 100%;
                      display: flex;
                      align-items: center;
                      justify-items: center;
                  }
        
                  .days li span {
                      width: 100%;
                      height: 100%;
                      text-align: center;
                      line-height: 32px;
                  }
        
                  .other-month {
                      color: #ccc;
                  }
        
                  .active {
                      background: #0375cd;
                      border-radius: 5px;
                  }
        
                  .this-month:hover {
                      cursor: pointer;
                      background: #28a1ff;
                      border-radius: 5px;
                  }
        
                  .year-container,
                  .month-container {
                      background: #fff;
                      padding: 10px;
                      border-radius: 5px;
                      display: grid;
                      grid-template-columns: 1fr 1fr 1fr;
                      grid-gap: 5px;
                      width: 240px;
                      position: fixed;
                  }
        
                  .year-container span,
                  .month-container span {
                      text-align: center;
                      cursor: pointer;
                  }
        
                  .year-container span:hover,
                  .month-container span:hover {
                      color: #28a1ff;
                  }
        
                  .isYear,
                  .isMonth {
                      color: #28a1ff;
                  }
        /* 底部样式 */
        .low{
            width: 100%;
            height: 50px;
            /* background: linear-gradient(600deg, #22a1c1, #84f3f7); */
            float: left;
            text-align: center;
        }
        .low span{
        
        font-size: 40px;
           
        }

      